<template>
<fieldset>
    <legend>第三方动画</legend>
    <p class="animate__animated animate__swing">
        flash动画样式
    </p>
    <br>
    <button @click="isShou=!isShou">点击开始动画</button>
    <transition name="" enter-active-class="animate__animated animate__swing" leave-active-class="animate__animated animate__fadeIn">
        <p v-if="isShou">来呀!快活呀</p></transition>
</fieldset>
</template>

<script>
    export default {
        name: "Animation3",
        data:()=>{
            return{
                isShou:true
            }
        }
    }
</script>

<style scoped>
@import "../../node_modules/animate.css/animate.css";
    p:first-of-type{
        width: 200px;
        height: 50px;
        background-color: darkslateblue;
    }
    P:nth-of-type(2){
        width: 200px;
        height: 200px;
        background-color: brown;
    }

</style>